/* 自定义 element 暗黑模式样式 */
:root {
	--sloth-menu-item-hover-color: var(--el-color-primary-light-9);
	--sloth-menu-active-bg: linear-gradient(
		72.47deg,
		var(--el-color-primary) 22.16%,
		var(--el-color-primary-light-3) 76.47%
	) !important;
}
.sideBgRevert {
	--sloth-menu-item-hover-color: #3b3f53;
}
html.dark {
	--sloth-menu-item-hover-color: #3b3f53;

	// * element style(可以全部注释掉，写在这里只是方便使用😀)
	// --el-color-primary: #409eff;
	// --el-color-primary-light-3: #3375b9;
	// --el-color-primary-light-5: #2a598a;
	// --el-color-primary-light-7: #213d5b;
	// --el-color-primary-light-8: #1d3043;
	// --el-color-primary-light-9: #18222c;
	// --el-color-primary-dark-2: #66b1ff;
	// --el-color-success: #67c23a;
	// --el-color-success-light-3: #4e8e2f;
	// --el-color-success-light-5: #3e6b27;
	// --el-color-success-light-7: #2d481f;
	// --el-color-success-light-8: #25371c;
	// --el-color-success-light-9: #1c2518;
	// --el-color-success-dark-2: #85ce61;
	// --el-color-warning: #e6a23c;
	// --el-color-warning-light-3: #a77730;
	// --el-color-warning-light-5: #7d5b28;
	// --el-color-warning-light-7: #533f20;
	// --el-color-warning-light-8: #3e301c;
	// --el-color-warning-light-9: #292218;
	// --el-color-warning-dark-2: #ebb563;
	// --el-color-danger: #f56c6c;
	// --el-color-danger-light-3: #b25252;
	// --el-color-danger-light-5: #854040;
	// --el-color-danger-light-7: #582e2e;
	// --el-color-danger-light-8: #412626;
	// --el-color-danger-light-9: #2b1d1d;
	// --el-color-danger-dark-2: #f78989;
	// --el-color-error: #f56c6c;
	// --el-color-error-light-3: #b25252;
	// --el-color-error-light-5: #854040;
	// --el-color-error-light-7: #582e2e;
	// --el-color-error-light-8: #412626;
	// --el-color-error-light-9: #2b1d1d;
	// --el-color-error-dark-2: #f78989;
	// --el-color-info: #909399;
	// --el-color-info-light-3: #6b6d71;
	// --el-color-info-light-5: #525457;
	// --el-color-info-light-7: #393a3c;
	// --el-color-info-light-8: #2d2d2f;
	// --el-color-info-light-9: #202121;
	// --el-color-info-dark-2: #a6a9ad;
	// --el-box-shadow: 0 12px 32px 4px rgb(0 0 0 / 36%), 0 8px 20px rgb(0 0 0 / 72%);
	// --el-box-shadow-light: 0 0 12px rgb(0 0 0 / 72%);
	// --el-box-shadow-lighter: 0 0 6px rgb(0 0 0 / 72%);
	// --el-box-shadow-dark: 0 16px 48px 16px rgb(0 0 0 / 72%), 0 12px 32px #000000, 0 8px 16px -8px #000000;
	// --el-bg-color-page: #0a0a0a;
	--el-bg-color: rgb(47 51 73);

	// --el-card-bg-color: var(--el-bg-color-overlay);
	// --el-bg-color-overlay: #1d1e1f;
	--el-bg-color-overlay: #262b40;

	// --el-text-color-primary: #e5eaf3;
	// --el-text-color-regular: #cfd3dc;
	// --el-text-color-secondary: #a3a6ad;
	// --el-text-color-placeholder: #8d9095;
	// --el-text-color-disabled: #6c6e72;
	// --el-border-color-darker: #636466;
	// --el-border-color-dark: #58585b;
	// --el-border-color: #4c4d4f;
	// --el-border-color-light: #414243;
	// --el-border-color-lighter: #363637;
	// --el-border-color-extra-light: #2b2b2c;
	// --el-fill-color-darker: #424243;
	// --el-fill-color-dark: #39393a;
	--el-fill-color: #363e58;
	--el-fill-color-light: rgb(53 57 79);

	// --el-fill-color-lighter: #1d1d1d;
	// --el-fill-color-extra-light: #191919;
	// --el-fill-color-blank: transparent;
	--el-mask-color: rgb(0 0 0 / 30%);

	// --el-mask-color-extra-light: rgb(0 0 0 / 30%);

	// * geeker-admin
	--sloth-login-shadow-light: 5px 5px 15px rgb(161 161 161 / 20%);
	--sloth-box-shadow-light: 0 0 10px rgb(255 255 255 / 10%);
	--sloth-border-light: 1px solid #4c4c4d;
	--sloth-main-bg-color: rgb(37 41 60);
	--sloth-popup-color: rgb(37 41 60);

	// * 以下为自定义暗黑模式内容
	// login
	.login-container {
		background-color: var(--el-fill-color-extra-light) !important;
		.login-box {
			background-color: var(--el-mask-color) !important;
			.login-form {
				background-color: var(--el-bg-color) !important;
				box-shadow: var(--sloth-login-shadow-light) !important;
				.logo-text {
					color: var(--el-text-color-primary) !important;
				}
			}
		}
	}

	// scroll-bar
	::-webkit-scrollbar {
		background-color: var(--el-scrollbar-bg-color) !important;
	}
	::-webkit-scrollbar-thumb {
		background-color: var(--el-border-color-darker) !important;
	}

	// content-box
	.content-box {
		.text {
			color: var(--el-text-color-regular) !important;
		}
	}

	// error-message
	.not-container {
		.not-detail {
			h2 {
				color: var(--el-text-color-primary) !important;
			}
		}
	}

	// el-table
	.table-box,
	.table {
		.el-table {
			.el-table__header th {
				color: var(--el-text-color-regular) !important;
				background-color: var(--el-bg-color) !important;
			}
		}
	}

	// layout
	.el-container {
		.el-aside {
			background-color: var(--el-bg-color) !important;
			border-right: var(--sloth-border-light) !important;
			.logo {
				border-bottom: var(--sloth-border-light) !important;
			}
		}
		.not-aside {
			border-right: none !important;
		}
		.el-header {
			background-color: var(--el-bg-color) !important;
			border-bottom-color: var(--el-border-color-light) !important;
		}
		.el-main {
			background-color: var(--sloth-main-bg-color) !important;
			.card {
				background-color: var(--el-bg-color) !important;
			}
		}
		.el-tabs {
			background-color: var(--el-bg-color) !important;
		}
		.el-footer {
			.footer {
				background-color: var(--el-bg-color) !important;
				border-top-color: var(--el-border-color-light) !important;
				a {
					color: var(--el-text-color-regular) !important;
				}
			}
		}
	}

	// .el-menu,
	// .el-sub-menu,
	// .el-menu-item,
	// .el-sub-menu__title {
	// 	background-color: var(--el-bg-color) !important;
	// 	&:not(.is-active) {
	// 		color: #bdbdc0 !important;
	// 	}
	// }

	// .el-menu-item:not(.is-active)::before,
	// .el-menu-item:not(.is-active):hover {
	// 	background-color: var(--sloth-menu-item-hover-color) !important;
	// }
	.aside-split {
		background-color: var(--el-bg-color) !important;
		border-right: var(--sloth-border-light) !important;
		.logo {
			border-bottom: var(--sloth-border-light) !important;
		}
	}

	// guide
	#driver-highlighted-element-stage {
		background-color: var(--el-color-info-light-5) !important;
	}
}
.vertical,
.columns,
.classic {
	.el-sub-menu.is-active {
		> .el-sub-menu__title {
			color: var(--el-color-primary) !important;
		}
	}
	&.rect {
		.el-menu,
		.el-menu--popup {
			.el-menu-item {
				&:hover,
				&.is-active {
					background: var(--el-color-primary-light-9);
					&::before {
						position: absolute;
						top: 0;
						bottom: 0;
						left: 0;
						width: 4px;
						content: '';
					}
				}
				&.is-active::before {
					background: var(--el-color-primary);
				}
			}
		}
	}
	&.round {
		.el-menu,
		.el-menu--popup {
			.el-menu-item {
				transition: none;
				&:hover,
				&.is-active {
					background: transparent !important;
					&::before {
						position: absolute;
						right: 8px;
						left: 8px;
						width: auto;
						height: 40px;
						margin: auto;
						content: '';

						// background: currentcolor;
						background: transparent;
						border-radius: var(--sloth-side-menu-radius);
					}
					> span {
						position: relative;
					}
				}
				&:hover {
					&::before {
						background: var(--sloth-menu-item-hover-color) !important;
					}
				}
				&.is-active {
					color: #ffffff;
					&::before {
						background: var(--sloth-menu-active-bg) !important;
					}
				}
			}
		}
	}
}
html.dark,
.sideBgRevert:not(.columns) {
	&.rect {
		.el-menu,
		.el-menu--popup {
			.el-menu-item {
				&:hover {
					background: var(--sloth-menu-item-hover-color);
				}
				&.is-active {
					background: var(--el-color-primary-light-9);
				}
			}
		}
	}
	&.round {
		.el-menu,
		.el-menu--popup {
			.el-menu-item {
				&:hover::before {
					background: var(--sloth-menu-item-hover-color);
				}
				&.is-active::before {
					background: var(--sloth-menu-active-bg);
				}
			}
		}
	}
}
